<template>
  <div class="teacherIndex">
    <teaheaded />
    <div class="box">
      <div class="bbox">
        <div class="leftBox">
          <div class="navbar">
            <router-link to="/teacher">学生管理</router-link>
          </div>
          <div class="navbar">
            <router-link to="/teacher/course">课程管理</router-link>
          </div>
          <!-- <div class="navbar">
            <router-link to="/teacher/work">发布作业</router-link>
          </div> -->
        </div>
        <div class="rightBox">
          <!-- <a class="addStudent">添加学生</a> -->
          <!-- <el-button
            type="text"
            id="addClass"
            class="addStudent"
            @click="addStudent"
            >添加学生</el-button
          > -->
          <el-button
            type="text"
            id="addClass"
            class="addClass"
            @click="addClass"
            >新建班级</el-button
          >
          <!-- <a id="addClass" class="addClass" @click="addClass">新建班级</a> -->
          <!-- <a class="clear"></a> -->
          <div class="sbox">
            <!-- <div class="left"> -->
            <el-tabs
              :tab-position="tabPosition"
              style="height: 500px"
              v-for="(item, index) in haveClass"
              :key="index"
            >
              <el-tab-pane label="所有学生">
                <el-table
                  :data="allStudent"
                  border
                  height="500"
                  style="width: 96%"
                >
                  <el-table-column prop="studentId" label="学号" width="180">
                  </el-table-column>
                  <el-table-column prop="realname" label="姓名">
                  </el-table-column>
                  <el-table-column prop="sex" label="性别" width="180">
                  </el-table-column>
                  <el-table-column prop="class_name" label="教学班">
                  </el-table-column>
                  <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        @click="delStudent(scope.row, item)"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane :label="item">
                <el-table
                  :data="someStudent"
                  border
                  height="500"
                  style="width: 96%"
                >
                  <el-table-column prop="studentId" label="学号" width="180">
                  </el-table-column>
                  <el-table-column prop="realname" label="姓名">
                  </el-table-column>
                  <el-table-column prop="sex" label="性别" width="180">
                  </el-table-column>
                  <el-table-column prop="class_name" label="教学班">
                  </el-table-column>
                  <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        @click="delStudent(scope.row, item)"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: "",
      userName: "",
      teacherData: "",
      //   activeName: "first",
      tabPosition: "left",

      //拥有的班级
      haveClass: [],
      allStudent: [],
      s: 0,
      someStudent: []
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },

    //新建班级
    addClass() {
      // console.log(this.$route);
      let teacherData = JSON.parse(sessionStorage.getItem("teacherData"));
      // console.log(teacherData);
      this.$prompt("请输入班级", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.submitcontent = value;
          this.$message({
            type: "success",
            message: "你要添加的班级是: " + value,
          });
          //添加班级
          this.$http
            .post("http://test.com:3000/teacher/addClass", {
              //班级id
              classid: this.$route.query.classid,
              //教师id
              teacherid: teacherData.teacher_id,
              //输入内容
              textcontent: this.submitcontent,
            })
            .then((res) => {
              this.haveClass = res.data;
              console.log(this.haveClass);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    //添加学生
    addStudent() {
      this.$prompt("请输入班级", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.submitcontent = value;
          this.$message({
            type: "success",
            message: "你要添加的班级是: " + value,
          });
          //添加班级
          this.$http
            .post("http://test.com:3000/teacher/addClass", {
              //班级id
              classid: this.$route.query.classid,
              //教师id
              teacherid: teacherData.teacher_id,
              //输入内容
              textcontent: this.submitcontent,
            })
            .then((res) => {
              console.log(res);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    //删除学生
    delStudent(e, item) {
      console.log(item);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // console.log(222);
          this.$http
            .post("http://test.com:3000/teacher/delstudent", {
              userid: e.user_id,
            })
            .then((res) => {
              location.href = "/teacher";
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.userData = JSON.parse(sessionStorage.getItem("userData"));
    this.teacherData = JSON.parse(sessionStorage.getItem("teacherData"));
    // console.log(this.teacherData.tname);

    if (this.userData != null) {
      this.userName = this.userData.uname;
    }

    //渲染所有学生
    this.$http
      .get("http://test.com:3000/teacher/allstudent", {
        // userid: this.$route.query.user_id,
        teachername: this.teacherData.tname
      })
      .then((res) => {
        this.allStudent = res.data;
        // console.log(this.allStudent);
      });

      //渲染部分学生
      this.$http.get("http://test.com:3000/teacher/somestudent", {
        classname: this.teacherData.class_name
      })
      .then(
        res => {
          this.someStudent = res.data;
          console.log(this.someStudent);
        }
      )

    //渲染班级
    this.$http
      .get("http://test.com:3000/teacher/myclass", {
        // classid: this.$route.query.classid,
        teacherid: this.teacherData.teacher_id,
      })
      .then((res) => {
        this.haveClass = res.data;
        // console.log(this.haveClass);
      });
  },
};
</script>
<style lang="less">
// 头部
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: @width;
  height: @rowheight;
  line-height: @rowheight;
  display: flex;
  padding-right: 130px;
  padding-left: 130px;
  background-color: #fff;
  border-bottom: 1px solid rgba(128, 128, 128, 0.237);
  & img {
    width: 130px;
    height: 40px;
    margin: 8px 15px 0 15px;
  }
  & a {
    padding: @pd;
    font-size: 16px;
    font-weight: bold;
  }
  & .toright {
    margin-left: auto;
    & .avater {
      position: relative;
      width: 24px;
      height: 24px;
      top: 5px;
      border-radius: 50%;
    }

    & a {
      padding-bottom: 22px;
    }
  }
}

// 中间区域
.box {
  width: 100vw;
  height: 91vh;
  margin-top: 65px;
  padding-top: 20px;
  background-color: #f7f7f7;
  & .bbox {
    width: 80%;
    margin: 0 auto;
    // border: 1px solid red;
    & .leftBox {
      width: 150px;
      height: 83vh;
      border: 1px solid #e3e3e3;
      float: left;
      background-color: #fff;
      padding-top: 10px;
      .navbar {
        height: 60px;
        line-height: 60px;
        a {
          font-size: 1.4rem;
          font-weight: bold;
        }
      }
    }
    & .rightBox {
      margin-left: 180px;
      height: 83vh;
      border-radius: 20px;
      background-color: #fff;
      & .addStudent {
        display: block;
        float: left;
        width: 80px;
        height: 30px;
        line-height: 8px;
        background-color: #409eff;
        color: white;
        border-radius: 10px;
        border: #409eff;
        cursor: pointer;
        margin-left: 20px;
        margin-top: 20px;
        span {
          color: #fff;
        }
      }
      & .addClass {
        position: relative;
        top: 20px;
        display: block;
        width: 80px;
        height: 30px;
        line-height: 8px;
        background-color: #409eff;
        border-radius: 10px;
        border: #409eff;
        cursor: pointer;
        margin-left: 20px;
        span {
          color: #fff;
        }
      }
      & .sbox {
        margin-top: 45px;
        font-size: 1.2rem;
        border-top: 1px solid #e3e3e3;

        & .left {
          // position: fixed;
          // float: left;
          width: 150px;
          height: 580px;
          padding-top: 10px;
          border-right: 1px solid #e3e3e3;
          & a {
            display: block;
            // border: 1px solid red;
            height: 40px;
            line-height: 40px;
            font-size: 1.2rem;
          }
          & .addClass {
            width: 80px;
            height: 30px;
            background-color: #fff;
            color: white;
            border-radius: 10px;
            cursor: pointer;
            color: #409eff;
            // border: #409eff;
            margin-top: 280px;
          }
        }
        & .el-tabs__nav-scroll {
          padding-top: 20px;
        }
        & .el-tabs__content {
          padding-top: 25px;
          padding-left: 10px;
          & th,
          td {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
